<template>
  <div class="page">

    <!-- 顶部搜索 开始 -->
    <div class="top_search">
      <van-icon name="arrow-left" class="van_icon" @click="goBack" />
      <van-search class="van_search" v-model="term" show-action shape="round" placeholder="搜索城市名或拼音查询" @input="onSearch"
        @cancel="onCancel" />
    </div>
    <!-- 顶部搜索 end -->

    <!-- 搜索内容 开始 -->
    <div class="search_content" v-show="term">
        <van-cell v-for="(item, index) in searchList" :key="`search_${index}`" :title="item.name" is-link @click="saveCity(item)" />
    </div>
    <!-- 搜索内容 end -->

    <!-- 底部内容 开始 -->
    <div class="content" v-show="!term">
      <div class="left">
        <div class="van-ellipsis cell" :class="!province ? 'cell_active' : ''" @click="chooseCity({})">热门</div>
        <div class="van-ellipsis cell" :class="province == item.id ? 'cell_active' : ''"
          v-for="(item, index) in provinceList" :key="index" @click="chooseCity(item)">{{ item.name }}</div>
      </div>
      <div class="right">
        <div class="hot_city" v-if="!province">
          <div class="title">当前定位/历史访问城市</div>
          <div class="cell" @click="saveCity({ name: currentCity, id: currentCityCode, code: currentCityCode })">
            <img src="@/assets/images/location.png" alt="">
            <span>{{ currentCity }}</span>
          </div>
          <div class="title sub_title">热门城市</div>
          <div class="city_list">
            <div class="cell" :class="city == item.id ? 'cell_active' : ''" v-for="(item, index) in hotCityList"
              :key="index" @click="saveCity(item)">{{ item.name }}</div>
          </div>

        </div>
        <div class="city_list" v-else>
          <div class="cell" :class="city == item.id ? 'cell_active' : ''" v-for="(item, index) in cityList" :key="index"
            @click="saveCity(item)">{{ item.name }}</div>
          <!-- <div class="hidden_cell" v-for="(item,index) in (3-(cityList.length%3))" :key="`h_${index}`"></div> -->
        </div>
      </div>
    </div>
    <!-- 底部内容 end -->

  </div>
</template>
<script>
import { Search, Cell, CellGroup } from "vant";
//import provinceList from "@/assets/json/city.json";
import { GET_CITY_HOTCITIES, GET_PROVINCE_CITIES } from "@/http/interface";
export default {
  components: {
    [Search.name]: Search,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      term: "",
      provinceList: [],
      province: "",
      cityList: [],
      city: "",
      hotCityList: [],
      currentCity: '',
      currentCityCode: '',
      cityList: [],
      searchList: []
    };
  },
  head() {
    return {
      link:[
        {ref:'canonical',href:`${this.$domain}/city/list`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, $cookies }) {
    let params = {}
    if (query.term) {
      params.term = query.term || ''
    }

    let res = await $axios.get(GET_CITY_HOTCITIES);
    let city = $cookies.get('city')
    let cityCode = $cookies.get('cityCode')
    let hotCityList = res.data || [];
    hotCityList.map(k => {
      k.id = k.code;
      return k;
    })


    let ces = await $axios.get(GET_PROVINCE_CITIES, { params: params });
    let provinceList = ces.data || []

    let cityList = []
    provinceList.map(k => {
      cityList = cityList.concat(k.children || []);
    })
    console.log(cityList)

    return { hotCityList, provinceList, currentCity: city, currentCityCode: cityCode, term: query.term, cityList };
  },
  created() {
    let query = this.$route.query;
    if (query.code) {
      this.city = query.code;
    }
  },
  methods: {
    // 选择城市
    chooseCity(row) {
      this.province = row.id;
      this.cityList = row.children || [];
    },

    // 保存城市
    saveCity(row) {
      let pre = this.$store.state.fromPage;
      let query = this.$route.query;
      query.city = row.name;
      query.code = row.id;
      this.city = row.code;
      this.$cookies.set('city', row.name)
      this.$cookies.set('cityCode', row.code)
      console.log(pre)
      this.$router.push({
        path: pre,
        query: query,
      });
    },

    // 返回
    goBack() {
      this.$router.go('-1')
    },

    // 搜索
    onSearch(term) {
      let list = this.cityList || []
      let o = list.filter(k => {
        return k.name.includes(term)
      })
      this.searchList = o || []
    },

    // 取消搜索
    onCancel() {
      let query = this.$route.query || {}
      this.$router.go('-1')
      // delete query.term;
      // this.$router.replace({
      //   path: '/city/list',
      //   query: {
      //     ...query,
      //     random: Math.random()
      //   }
      // })
    }

  },
};
</script>
<style lang="less" scoped>@import "/assets/styles/city/index.less";</style>